

<!-- header -->
<template>
	<view class='titleBtnsHeader-Container'>

		<!-- 白色风格 -->
		<block v-if="colorTheme == 'white'">
			<view v-if="!hideBackBtn" class="leftBtns">
				<image v-if="gotoNavBackCustom == '1'" @click="gotoNavBackCustomHandler" class="back" :src="icon.backBtn_white"></image>
				<image v-else @click="gotoNavBack" class="back" :src="icon.backBtn_white"></image>
			</view>
			
			<view v-if="pageTitle" class="title white">{{pageTitle}}</view>
			
			<view class="rightBtns">
				<block v-if="rightBtnType == 'msgCenter'">
					<view @click="toggleMenuListHandler()" class="msgCenter-Container">
						<image class="menu" :src="icon.menuBtn_white"></image>
						<view v-if="noticeTipCount || $store.state.msgNumber" class="msgCount">
							{{(noticeTipCount - 0 + $store.state.msgNumber) >99 ? '99+' : (noticeTipCount - 0 + $store.state.msgNumber)}}
						</view>
					</view>
				</block>
				<slot name="rightBtns">
				</slot>
			</view>
		</block>
		
		
		<!-- 黑色风格 -->
		<block v-if="colorTheme == 'black'">
			<view v-if="!hideBackBtn" class="leftBtns">
				<image v-if="gotoNavBackCustom == '1'" @click="gotoNavBackCustomHandler" class="back" :src="icon.backBtn_black"></image>
				<image v-else @click="gotoNavBack" class="back" :src="icon.backBtn_black"></image>
			</view>
			
			<view v-if="pageTitle" class="title black">{{pageTitle}}</view>
			
			<view class="rightBtns">
				<block v-if="rightBtnType == 'msgCenter'">
					<view @click="toggleMenuListHandler()" class="msgCenter-Container">
						<image class="menu" :src="icon.menuBtn_black"></image>
						<view class="msgCount" v-if="noticeTipCount || $store.state.msgNumber">
							{{(noticeTipCount - 0 + $store.state.msgNumber) > 99 ? '99+' : (noticeTipCount - 0 + $store.state.msgNumber)}}
						</view>
					</view>
				</block>
				<slot name="rightBtns">
				</slot>
			</view>
		</block>
		
		
		<!-- 透明风格 -->
		<block v-if="colorTheme == 'opacity'">
			<view v-if="!hideBackBtn" class="leftBtns">
				<image v-if="gotoNavBackCustom == '1'" @click="gotoNavBackCustomHandler" class="back" :src="icon.backBtn_white"></image>
				<image v-else @click="gotoNavBack" class="back" :src="icon.backBtn_white"></image>
			</view>
			
			<view v-if="pageTitle" class="title white">{{pageTitle}}</view>
			
			<view class="rightBtns">
				<block v-if="rightBtnType == 'msgCenter'">
					<view @click="toggleMenuListHandler()" class="msgCenter-Container">
						<image class="menu" :src="icon.menuBtn_white"></image>
						<view v-if="noticeTipCount || $store.state.msgNumber" class="msgCount">
							{{noticeTipCount + $store.state.msgNumber>99 ? '99+' : noticeTipCount + $store.state.msgNumber}}
						</view>
					</view>
				</block>
				<slot name="rightBtns">
				</slot>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	import app from "@/App.vue"
	import detailMenu from "@/components/detailMenu/detailMenu";

	export default {
		components: {
			detailMenu
		},
		data() {
			return {
				icon: {
					backBtn_white: "/static/images/common/return-white.png",
					backBtn_black: "/static/images/common/return-black.png",
					menuBtn_white: "/static/images/common/msg-center-white.png",
					menuBtn_black: "/static/images/common/msg-center-black.png"
				},
				
				noticeTipCount: 0
			};
		},
		props: {
			hideBackBtn: {
				type: Boolean,
				default: false
			},
			gotoNavBackCustom: {
				type: String,
				default: ""
			},
			pageTitle: {
				type: String,
				default: ""
			},
			rightBtnType: String,
			colorTheme: {
				type: String,
				default: 'color'
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		mounted(){
			
			let that = this;
			uni.$on('noticeTipCountUpdate', function() {
				that.getNoticeTipCount();
			});
			
			if (that.hasLogin) {
				that.getNoticeTipCount();
			}
		},
		methods: {
			
			//返回
			gotoNavBack() {
				console.log("返回");
				uni.getStorage({
					key:'firstLoad',
					success(res){
						uni.switchTab({
							url:'/pages/index/index'
						});
						uni.removeStorage({
							key:'firstLoad'
						});
						return;
					},
					fail() {
						let a = getCurrentPages();
						if (a.length > 1) {
							// 我是跳进来的
							uni.navigateBack({
								delta:1
							});
						} else {
							// 我的刷新来的
							uni.switchTab({
								url:'/pages/index/index'
							})
						}
					}
				});
			},
			gotoNavBackCustomHandler() {
				this.$emit("gotoNavBackCustomHandler");
			},
			
			//详情菜单
			toggleMenuListHandler() {
				this.$emit('toggleMenuListHandler');
			},
			
			
			//获取消息数量
			getNoticeTipCount() {
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/customerNoticeApi/customerNoticeUnreadCountApi',
					method: 'POST',
					data: {
						cnType: "",
						cnStatus: '0'
					},
					success: function(res) {
						that.noticeTipCount = res.data.response;
					}
				});
			}
		}
	};
</script>

<style lang="less">
	
	// 页面标题、按钮
	.titleBtnsHeader-Container {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 88rpx;
		overflow: hidden;
	
		.leftBtns {
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			height: 86rpx;
			
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
		
		.title {
			position: absolute;
			z-index: 99;
			bottom: 0;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			background-color: rgba(0,0,0,0);
			&.white {
				color:rgba(255,255,255,1);
			}
			&.black {
				color: rgba(51, 51, 51, 1);
			}
		}
		
		.rightBtns {
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: absolute;
			bottom: 0;
			right: 0;
			// width: 100%;
			height: 88rpx;
		}
	
		.search, .menu {
			width: 40rpx;
			height: 40rpx;
		}
		
		.search {
			margin-right: 40rpx;
		}
		.menu {
			margin-right: 46rpx;
		}
		
		.msgCount {
			box-sizing: content-box;
			position: absolute;
			bottom: 50rpx;
			right: 32rpx;
			min-width: 26rpx;
			width: auto;
			height:26rpx;
			height:26rpx;
			line-height: 26rpx;
			text-align: center;
			font-size:20rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color: #FE5E49;
			background:rgba(255,255,255,1);
			box-shadow:0px 1rpx 4rpx 0px rgba(68,68,68,0.2);
			border-radius:26rpx;
			border: 1px solid #FE5E49;
		}
	}
	
	.msgCenter-Container {
		display: flex;
		align-items: center;
	}
</style>




